import lessModule from "./index.module.less"
import rightArrowImage from "../../../../assets/image/homePage-rightArrow.png"
import { $eventBus } from "../../../../common/utils"
import { Fragment, useEffect } from "react"
import HomePage_TagComponent from "../tag"
// 主页-多选按钮组件
interface myInterface {
    operation?:string
    stationData?: object
    selectedList: Array<string>
    selectedOtherList?: Array<object | number>
    minWidth?: number | string
    monitoringType: string
    monitorModalName: string
    change_selectedList?: Function
}

const HomePage_MultipleBtnComponent: React.FC<myInterface> = (props) => {
    const click_btn = () => {
        setTimeout(() => {
            $eventBus.emit("openSelectMonitorModal", { mode: "multiple",operation:props.operation ?? "安装", stationData: props.stationData, monitoringType: props.monitoringType, modalName: props.monitorModalName, selectedList: props.selectedList ?? [], selectedOtherList: props.selectedOtherList ?? [], })
        });
    }

    const click_delMultipleTag = (value: string) => {
        const idx = props.selectedList.indexOf(value)
        props.change_selectedList?.({
            selectedList: [...props.selectedList?.filter((_: string, itemIdx: number) => itemIdx !== idx)],
            selectedOtherList: [...(props.selectedOtherList?.filter((_: object | number, itemIdx: number) => itemIdx !== idx) ?? [])]
        })


    }

    return (
        <div className={lessModule["homePageMultipleBtnComponent"]} style={{ minWidth: props.minWidth ?? "100%", cursor: props.monitoringType ? "pointer" : "not-allowed" }} onClick={() => props.monitoringType && click_btn()}>
            {
                props.selectedList?.length > 0 && <div className={lessModule["homePageMultipleBtnComponent-group"]}>
                    {
                        props.selectedList?.map((item, idx) => (
                            <Fragment key={`selected${idx}`}>
                                <HomePage_TagComponent name={item} click_del={click_delMultipleTag} />
                            </Fragment>
                        ))
                    }
                </div>
            }
            {
                !props.selectedList?.length && <span className={lessModule["homePageMultipleBtnComponent-placeholder"]}>请选择</span>
            }
            <img src={rightArrowImage} />
        </div>
    )
}


export default HomePage_MultipleBtnComponent